<script setup lang="ts">
import { getMedicalOrderLogistics } from '@/api/medicine'
import type { Express } from '@/types/medicine'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
// 导入坐标自定义图片
import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'

const route = useRoute()
console.log('路由参数：', route)
// 1. 获取药品订单物流详情
const express = ref({} as Express)
const getExpress = async () => {
  const res = await getMedicalOrderLogistics(route.params.id as string)
  console.log('药品订单物流详情:', res)
  express.value = res
}
onMounted(() => {
  getExpress()
})
// 2. 高德地图绘制物流轨迹
// 配置高德地图==后台密钥==
window._AMapSecurityConfig = {
  securityJsCode: '9ad2b31a5625c678a3e315dd51e130f3'
}
const initMap = async () => {
  // 1. 回调写法
  // AMapLoader.load({
  //   key: 'fe7e550905bb36171ef9c9e86fdfb358', // 后台key
  //   version: '2.0'
  // }).then((AMap) => {
  //   // 使用 Amap 初始化地图
  //   console.log('高德地图api:', AMap)
  // })
  // 2. async/await写法（推荐）
  try {
    const AMap = await AMapLoader.load({
      key: 'fe7e550905bb36171ef9c9e86fdfb358', // 后台key
      version: '2.0'
    })
    console.log('高德地图api:', AMap)
    // 1. 绘制地图显示到页面指定的位置=> map是地图实例
    const map = new AMap.Map('map', {
      zoom: 12, // 初始化地图层级：1. 值越小显示的范围越大 2.值越大显示的信息越详细
      mapStyle: 'amap://styles/whitesmoke' // 设置地图的皮肤=》语法：amap://styles/皮肤名字
    })
    // 2. 加载Driving插件类，绘制物流轨迹
    AMap.plugin('AMap.Driving', () => {
      // 加载Driving插件类成功会执行这个回调=》可以使用
      // 构造路线导航类实例
      const driving = new AMap.Driving({
        map, // 指定路线显示的地图
        showTraffic: false, // 关闭交通状况显示
        hideMarkers: true // 关闭默认坐标图片的显示
      })
      // 根据起终点经纬度规划驾车导航路线
      // const start = [116.339537, 40.058637] // 起点=》坐标：[经度, 纬度]
      // 口诀：掐头（shift）去尾（pop）
      const start = express.value.logisticsInfo.shift() // 发货地
      // const end = [116.343421, 40.060255] // 终点
      const end = express.value.logisticsInfo.pop() // 收货地
      // 途径点坐标
      const waypoints = express.value.logisticsInfo.map((item) => [item.longitude, item.latitude])
      console.log('途径点坐标：', waypoints)
      driving.search(
        // 说明：longitude 经度 + latitude纬度
        [start?.longitude, start?.latitude],
        [end?.longitude, end?.latitude],
        {
          // 数据格式：[[经度1,纬度1], [经度2,纬度2]...]
          waypoints
        },
        (status: string) => {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            console.log('绘制路线成功！')
            // 自定义线路坐标显示的图标
            // 自定义起点的图标
            new AMap.Marker({
              icon: startImg, // url或者本地导入图片
              position: [start?.longitude, start?.latitude], // 位置
              map // 指定图标显示的地图
            })
            // 自定义终点的图标
            new AMap.Marker({
              icon: endImg,
              position: [end?.longitude, end?.latitude],
              map
            })
            // 自定义当前药品运送位置的图标
            const car = new AMap.Marker({
              icon: carImg,
              position: [
                express.value.currentLocationInfo.longitude,
                express.value.currentLocationInfo.latitude
              ],
              map
            })
            // 根据当前药品运送位置的图标实例调整地图为最佳视野
            setTimeout(() => {
              // 语法： map.setFitView([图标实例1, 图标实例2...])
              map.setFitView([car])
              // 调整地图缩放级别：1. 值越小显示的范围越大 2.值越大显示的信息越详细
              map.setZoom(10)
            }, 3000)
          } else {
            console.log('绘制路线失败！')
          }
        }
      )
    })
  } catch (error) {
    console.log('高德地图加载失败：', error)
  }
}
onMounted(() => {
  // 组件挂载后，初始化高德地图
  initMap()
})
</script>

<template>
  <div class="order-logistics-page">
    <!-- 将来高德地图显示到这个位置，绘制物流轨迹 -->
    <div id="map">
      <!-- 物流状态: 订单派送状态1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ express.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">{{ express.statusValue }}——预计{{ express.estimatedTime }}送达</p>
        <!-- 物流公司信息 -->
        <p class="predict">
          <span>{{ express.name }}</span>
          <span>{{ express.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <!-- 
        步骤条组件：
        1. direction 步骤条的显示方向
        2. active 通过索引值控制哪一步被选中
       -->
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in express.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
